<template>
  <div>
    <span style="margin: 8px">月份:</span>
    <el-select v-model="warehouseInfo.selectedMonth" clearable placeholder="请选择月份" style="width: 360px" @change="showCustomer">
      <el-option
        v-for="month in options"
        :key="month.value"
        :label="month.label"
        :value="month.value"
      />
    </el-select>
    <span style="margin: 8px">仓库:</span>
    <el-select v-model="warehouseInfo.warehouseId" clearable placeholder="请选择仓库" style="width: 360px" @change="showWarehouse">
      <el-option
        v-for="item in warehouses"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      />
    </el-select>
    <el-row>
      <el-col :span="6">
        <el-statistic title="销售订单数量/单" :value="totalCount">
          <template #suffix>
            <el-icon style="vertical-align: -0.125em;font-size: 500px">
              <ChatLineRound />
            </el-icon>
          </template>
        </el-statistic>
      </el-col>
      <el-col :span="6">
        <el-statistic title="产品种类/种" :value="ratio">
          <template #suffix>
            <el-icon style="vertical-align: -0.125em;font-size: 500px">
              <ChatLineRound />
            </el-icon>
          </template>
        </el-statistic>
      </el-col>
      <el-col :span="6">
        <el-statistic title="出入库数量/件" :value="totalTransactions">
          <template #suffix>
            <el-icon style="vertical-align: -0.125em;font-size: 500px">
              <ChatLineRound />
            </el-icon>
          </template>
        </el-statistic>
      </el-col>
      <el-col :span="6">
        <el-statistic title="出入库产品成本价格合计/元" :value="feedbackNumber">
          <template #suffix>
            <el-icon style="vertical-align: -0.125em;font-size: 500px">
              <ChatLineRound />
            </el-icon>
          </template>
        </el-statistic>
      </el-col>
    </el-row>
    <div>
      <el-row>
        <el-col :span="6">
          <el-statistic title="出入库产品售价合计/元" :value="TotalCost">
            <template #suffix>
              <el-icon style="vertical-align: -0.125em;font-size: 500px">
                <ChatLineRound />
              </el-icon>
            </template>
          </el-statistic>
        </el-col>
        <el-col :span="6">
          <el-statistic title="库存总数量/件" :value="getTotalQuantity">
            <template #suffix>
              <el-icon style="vertical-align: -0.125em;font-size: 500px">
                <ChatLineRound />
              </el-icon>
            </template>
          </el-statistic>
        </el-col>
        <el-col :span="6">
          <el-statistic title="入库数量/件" :value="totalQuantityByWarehouse">
            <template #suffix>
              <el-icon style="vertical-align: -0.125em;font-size: 500px">
                <ChatLineRound />
              </el-icon>
            </template>
          </el-statistic>
        </el-col>
        <el-col :span="6">
          <el-statistic title="出库数量/件" :value="getTotalCost">
            <template #suffix>
              <el-icon style="vertical-align: -0.125em;font-size: 500px">
                <ChatLineRound />
              </el-icon>
            </template>
          </el-statistic>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-statistic title="入库产品成本总额/元" :value="getTotalCostByWarehouseAndDates">
            <template #suffix>
              <el-icon style="vertical-align: -0.125em;font-size: 500px">
                <ChatLineRound />
              </el-icon>
            </template>
          </el-statistic>
        </el-col>
        <el-col :span="6" style="font-size: 200px">
          <el-statistic title="出库产品成本总额/元" :value="getTotalRevenue">
            <template #suffix>
              <el-icon style="vertical-align: -0.125em;font-size: 500px">
                <ChatLineRound />
              </el-icon>
            </template>
          </el-statistic>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
// eslint-disable-next-line no-unused-vars
import warehouseApi from '@/api/warehouse/warehouse'

export default {
  data() {
    return {
      options: [],
      warehouseInfo: {
        selectedMonth: '',
        warehouseId: ''
      },
      warehouses: [],
      selectedWarehouse: '',
      totalCount: '',
      ratio: '',
      totalTransactions: '',
      feedbackNumber: '',
      TotalCost: '',
      getTotalQuantity: '',
      totalQuantityByWarehouse: '',
      getTotalCost: '',
      getTotalCostByWarehouseAndDates: '',
      getTotalRevenue: ''
    }
  },
  created() {
    this.generateMonthOptions()
    this.getWarehouseName()
  },
  methods: {
    getWarehouseName() {
      warehouseApi.getwarehouses().then(res => {
        this.warehouses = res.data
      })
    },
    generateMonthOptions() {
      for (let i = 1; i <= 12; i++) {
        this.options.push({
          label: i + '月',
          value: i
        })
      }
    },
    showCustomer() {
      // 处理选择月份后的逻辑
      warehouseApi.getTotalCount(this.warehouseInfo).then(res => {
        this.totalCount = res.data
      })
      warehouseApi.getProductCount(this.warehouseInfo).then(res => {
        this.ratio = res.data
      })
      warehouseApi.getInandOutCount(this.warehouseInfo).then(res => {
        this.totalTransactions = res.data
      })
      warehouseApi.getTotalCostByProduct(this.warehouseInfo).then(res => {
        this.feedbackNumber = res.data
      })
      warehouseApi.getTotalCostByStock(this.warehouseInfo).then(res => {
        this.TotalCost = res.data
      })
      warehouseApi.getTotalQuantityByWarehouse(this.warehouseInfo).then(res => {
        this.getTotalQuantity = res.data
      })
      warehouseApi.getTotalQuantityByWarehouseAndDate(this.warehouseInfo).then(res => {
        this.totalQuantityByWarehouse = res.data
      })
      warehouseApi.getTotalCostByWarehouseAndDate(this.warehouseInfo).then(res => {
        this.getTotalCost = res.data
      })
      warehouseApi.getTotalCostByWarehouseAndDates(this.warehouseInfo).then(res => {
        this.getTotalCostByWarehouseAndDates = res.data
      })
      warehouseApi.getTotalRevenueByWarehouseAndDate(this.warehouseInfo).then(res => {
        this.getTotalRevenue = res.data
      })
    },
    showWarehouse() {
      warehouseApi.getTotalCount(this.warehouseInfo).then(res => {
        this.totalCount = res.data
      })
      warehouseApi.getProductCount(this.warehouseInfo).then(res => {
        this.ratio = res.data
      })
      warehouseApi.getInandOutCount(this.warehouseInfo).then(res => {
        this.totalTransactions = res.data
      })
      warehouseApi.getTotalCostByProduct(this.warehouseInfo).then(res => {
        this.feedbackNumber = res.data
      })
      warehouseApi.getTotalCostByStock(this.warehouseInfo).then(res => {
        this.TotalCost = res.data
      })
      warehouseApi.getTotalQuantityByWarehouse(this.warehouseInfo).then(res => {
        this.getTotalQuantity = res.data
      })
      warehouseApi.getTotalQuantityByWarehouseAndDate(this.warehouseInfo).then(res => {
        this.totalQuantityByWarehouse = res.data
      })
      warehouseApi.getTotalCostByWarehouseAndDate(this.warehouseInfo).then(res => {
        this.getTotalCost = res.data
      })
      warehouseApi.getTotalCostByWarehouseAndDates(this.warehouseInfo).then(res => {
        this.getTotalCostByWarehouseAndDates = res.data
      })
      warehouseApi.getTotalRevenueByWarehouseAndDate(this.warehouseInfo).then(res => {
        this.getTotalRevenue = res.data
      })
    }
  }
}
</script>

<style scoped lang="scss">
/* 给 el-row 添加样式 */
.el-row {
  margin-bottom: 20px;
  width: 100%;
  font-size: 30px;
}

/* 给 el-col 添加样式 */
.el-col {
  padding: 0 10px;
  text-align: center;
  margin-top: 30px;
  height: 190px;
}

//修改标题样式
.el-statistic {
  font-size: 200px;
}

/* 修改值样式 */
.el-statistic {
  font-size: 20px;
}

/* 修改后缀图标样式 */
.el-icon-chat-line-round {
  font-size: 16px;
}

/* 修改统计图标样式 */
.el-icon-male {
  font-size: 100px;
}

/* 添加背景颜色 */
.el-row, .el-col, .el-statistic {
  background-color: #f1f1f1;
  border-radius: 4px;
}

/* 调整元素之间的间距 */
.el-row:not(:last-child) {
  margin-bottom: 10px;
}

/* 将模板中的分隔线换成合适的图标 */
.el-statistic__suffix {
  display: flex;
  align-items: center;
}

/* 为图标和文本之间添加间距 */
.el-statistic__suffix .el-icon {
  margin-right: 20px;
}
</style>
